<template>
	<router-layout>
	<div class="pageBg" ref="scroll">
		<div class="Bscroll" >
			<div class="banner"><img src="@/assets/images/index/banner.jpg" /></div>
			<div class="indexBox">
				<div class="content">
					<div class="input_city">
						<div class="city_start" @click="choosestartPrintName">
							<van-field 
								v-model="startPrintName" 
								placeholder="出发地" 
								readonly 
								class="input 
								startField" 
							/>
						</div>
						<div class="city_change" >
							<div>
								<img ref="trans" class="circle" src="@/assets/images/index/changeb.png" />
								<img class="bg" src="@/assets/images/index/change.png" />
							</div>
						</div>
						<div class="city_end" @click="chooseendPrintName">
							<van-field 
								v-model="endPrintName" 
								placeholder="目的地" 
								input-align="right" 
								readonly 
								class="input endField" 
							/>
						</div>
					</div>
					<div class="input_date">
						<van-cell is-link @click="datePicker">
							<template #title>
								<span class="date_date">{{ date }}</span>
								<span class="date_week">{{ week }}</span>
							</template>
						</van-cell>
					</div>
					<div class="input_btn"><van-button class="submit_btn" @click="search">搜索汽车票</van-button></div>
					<div class="search_his" v-show="searchHisShow">
						<div class="delete" @click="deleteSearch">清除</div>
						<div class="history_cont">
							<span><img src="@/assets/images/index/clock.png" /></span>
							<span v-for="(item, index) in searchHis" :key="index" @click="setInputStorage(item)">{{ item.Print }}</span>
						</div>
					</div>
				</div>
				<div class="guide">
					<div class="input_guide">
						<van-cell center title="购票指南" label="查看在线购票相关问题" is-link @click="showGuide"/></div>
				</div>
				<div class="tag">
					<div>
						<img src="@/assets/images/index/tag1.png" />
						<h3>预定方便</h3>
						<p>无需排队</p>
					</div>
					<div>
						<img src="@/assets/images/index/tag2.png" />
						<h3>急速出票</h3>
						<p>官方合作</p>
					</div>
					<div>
						<img src="@/assets/images/index/tag3.png" />
						<h3>服务优质</h3>
						<p>7*24小时</p>
					</div>
				</div>
				<div class="call">
					<a href="tel:13666666666">
						<span><img src="@/assets/images/index/phone.png" /></span>
						联系客服
					</a>
				</div>
			</div>
			<!-- 日期选择 -->
			<van-calendar 
			 v-model="dateShow"
			 @confirm="onConfirm" 
			 color="#438BF7" 
			 :round="false" 
			 position="right" 
			 :min-date="minDate" 
			 :max-date="maxDate" 
			 :show-confirm="false" 
			/>
		</div>
	</div>
	<!-- 购票指南弹窗 -->
	<van-popup
		v-model="show" 
		class="guidepop" 
		@close="tabBarShow"
	>
	  <div>
			<h2>购票平台代理费</h2>
			<p>因客运站要求或平台运营需求，部分线路收取平台代理费，不同客运站收取的金额不同。</p>
			<h2>购票失败</h2>
			<p>因网络异常，余票不足等情况造成的购票失败，全额退款至个人账户。</p>
			<h2>支持购票证件</h2>
			<p>目前只支持使用身份证购买</p>
			<h2>提前几天购票</h2>
			<p>一般可提前3-5天购票，节假日各客运站会适当调整。</p>
			<h2>班次暂不可购</h2>
			<p>因余票不足、客运站升级维护等情况均显示暂不可购！</p>
		</div>
	</van-popup>
	<TabBar  ref="tabbar"></TabBar>
	</router-layout>
</template>
<script>
import authMixin from '@/mixin/mixin'
import TabBar from '@/components/common/tabbar/tabbar'
export default {
	data() {
		return {
			show:false,
			scroll:0,
			hasKey:false,
			scrollTop:0,
			StopCode:'',    //到站站码
			StationCode:'',  //隶属站编号 即发车站站码
			startPrintName: '',
			endPrintName: '',
			searchHis:[],
			searchHisShow: false,
			rotate: 180,
			dateShow: false,
			date: '',
			week: '今天',
			dateScope: 4, //可买票天数范围
			minDate: new Date(), //日期选择最小值即今天的日期
			maxDate: '' //日期选择最大值
		};
	},
	mixins:[authMixin],
	components:{
		TabBar
	},
	created() {
		this.getQuery()
		this.getSelectScoped()
		this.date = this.$timeFormat('m月d日', new Date().getTime())
		this.maxDate = new Date(new Date().setDate(new Date().getDate() + this.dateScope))
		if(this.$storage.get('search')){
			this.searchHis = JSON.parse(this.$storage.get('search'))
		}
		if (!this.searchHis.length) {
			this.searchHisShow = false;
		} else {
			this.searchHisShow = true;
		}
	},
	mounted() {
		
	},
	activated() {
		
	},
	deactivated(){
	
	},
	watch:{
		dateScope(){
			this.$nextTick(()=>{
				
			})
		}
	},
	methods: {
		showGuide(){
			this.show = true
			this.$refs.tabbar.show = false
		},
		tabBarShow(){
			this.$refs.tabbar.show = true
		},
		getQuery() {
			if (this.$store.state.startPrintName) {
				this.startPrintName = this.$store
				.state.startPrintName
			}
			if (this.$store.state.endPrintName) {
				this.endPrintName = this.$store.state.endPrintName
			}
			if (this.$store.state.StationCode) {
				this.StationCode = Number(this.$store.state.StationCode)
			}
			if (this.$store.state.StopCode) {
				this.StopCode = Number(this.$store.state.StopCode)
			}

		},
		switchStation() {
			this.$refs.trans.style.transform = 'rotate(' + this.rotate + 'deg)';
			this.rotate += 180;
			document.querySelector('.startField').classList.add('switching');
			document.querySelector('.endField').classList.add('switching');
			setTimeout(() => {
				document.querySelector('.startField').classList.remove('switching');
				document.querySelector('.endField').classList.remove('switching');
			}, 200);
			let switchCity = this.startPrintName;
			this.startPrintName = this.endPrintName;
			this.endPrintName = switchCity;
			let switCode = this.StationCode;
			this.StationCode = this.StopCode;
			this.StopCode = switCode;
		},
		datePicker() {
			this.dateShow = true;
		},
		formatDate(date) {
			return `${date.getMonth() + 1}月${date.getDate()}日`;
		},
		formatWeek(date) {
			switch (date.getDay()) {
				case 0:
					return `周日`;
					break;
				case 1:
					return `周一`;
					break;
				case 2:
					return `周二`;
					break;
				case 3:
					return `周三`;
					break;
				case 4:
					return `周四`;
					break;
				case 5:
					return `周五 `;
					break;
				case 6:
					return `周六`;
					break;
			}
		},
		onConfirm(option) {
			//日期选择回调
			this.dateShow = false;
			this.date = this.formatDate(option);
			this.week = this.formatWeek(option);
		},
		deleteSearch() {
			this.$storage.remove('search');
			this.searchHisShow = false;
		},
		setInputStorage(item) {
			//历史点击设置起点终点
			this.startPrintName = item.Print.split('-')[0]
			this.endPrintName = item.Print.split('-')[1]
			this.StationCode = item.StationCode
			this.StopCode = item.StopCode
		},
		choosestartPrintName() {
			this.$router.push('/startCity');
		},
		chooseendPrintName() {
			this.$router.push('/endCity');
		},
		getSelectScoped(){
			//买票日期范围
			this.$request({
				method:'get',
				url:'/index/departuredate'
			}).then(res=>{
				this.dateScope = res.data.length-1 || 4
			})
		},
		search() {
			//判断起始终点是否不为空
			if (!this.startPrintName) {
				this.$toast({
					message: '请输入出发地',
					forbidClick: true,
				})
			} else if (!this.endPrintName) {
				this.$toast({
					message: '请输入目的地',
					forbidClick: true,
				})
			} else {
				///
				let search = `{
					"Print": "${this.startPrintName}-${this.endPrintName}",
					"StationCode": "${this.StationCode}",
					"StopCode": "${this.StopCode}"
				}`
				if (!this.$storage.get('search')) {
					let searchStorage = []
					searchStorage.push(JSON.parse(search))
					this.$storage.set('search', JSON.stringify(searchStorage))
				} else {
					let storageData = JSON.parse(this.$storage.get('search'))
					storageData.forEach(item=>{
						if(item.Print == JSON.parse(search).Print){
							this.haskey = true
						}
					})
					if(!this.haskey){
						storageData.push(JSON.parse(search))
						this.$storage.set('search', JSON.stringify(storageData))
					}
				}
				this.$router.push({
					path: '/searchBus',
					query: {
						startPrintName: this.startPrintName,
						endPrintName: this.endPrintName,
						date: this.date,
						week: this.week,
						dateScope: this.dateScope,
						StopCode:this.StopCode,
						StationCode: this.StationCode,
					}
				})
				///
			}
		} //search() end
	}
};
</script>

<style scoped>
.banner {
	position: relative;
	z-index: 1;
}
.banner img {
	width: 100%;
}
.indexBox {
	position: relative;
	z-index: 2;
	margin-left: 0.3rem;
	margin-right: 0.3rem;
	margin-top: -0.5rem;
}
.content {
	background: #fff;
	border-radius: 0.2rem;
	padding: 0.3rem;
}
.input_city {
	display: flex;
	align-items: center;
	height: auto;
	overflow: hidden;
}
.city_start {
	float: left;
	width: 40%;
	border-bottom: 1px solid #ebedf0;
}
.city_change {
	float: left;
	width: 20%;
	height: 100%;
	text-align: center;
}
.city_end {
	float: right;
	width: 40%;
	border-bottom: 1px solid #ebedf0;
}
.input {
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-size: 0.47rem;
}
.city_change > div {
	position: relative;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.city_change > div img {
	width: 0.84rem;
}
.city_change > div .circle {
	position: absolute;
	left: 50%;
	top: 45%;
	margin-left: -0.43rem;
	margin-top: -0.42rem;
	z-index: 1;
	transition: all 0.5s ease 0s;
}
.rotate {
	transform: rotateZ(180deg);
}
.input_date .van-cell {
	padding-left: 0 !important;
	padding-right: 0 !important;
	font-size: 0.47rem;
}
.input_date {
	padding: 0.1rem 0 0.08rem 0;
	border-bottom: 1px solid #ebedf0;
}
.date_week {
	font-size: 0.39rem;
	color: #b3b3b3;
	margin-left: 0.15rem;
}
.input_date .van-icon {
	color: #b3b3b3;
}
.input_btn {
	margin: 0.6rem 0;
}
.submit_btn {
	background: linear-gradient(45deg, #62b0fb, #438bf7);
	border-radius: 1.1rem;
	width: 100%;
	height: 1.1rem;
	line-height: 1.1rem;
	text-align: center;
	color: #fff;
	font-size: 0.43rem;
	letter-spacing: 1px;
	box-shadow: 2px 5px 15px rgba(93, 170, 250, 0.4);
	border: none !important;
}
.submit_btn::before {
	display: none !important;
}
.van-button__content::before {
	display: none !important;
}
.search_his {
	height: auto;
	overflow: hidden;
}
.delete {
	float: right;
	font-size: 0.36rem;
	color: #febc22;
}
.history_cont img {
	width: 0.38rem;
	vertical-align: -0.09rem;
}
.history_cont span {
	color: #ccc;
	font-size: 0.31rem;
	padding-right: 0.15rem;
	display: inline-block;
}
.history_cont {
	box-sizing: border-box;
	height: 0.7rem;
	line-height: 0.7rem;
	margin-right: 1.5rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.delete {
	display: flex;
	height: 0.7rem;
	align-items: center;
}
.guide {
	position: relative;
	background: #fff;
	border-radius: 0.2rem;
	padding: 0 0.3rem;
	margin-top: 0.3rem;
}
.guide .van-cell {
	padding-top: 0.3rem !important;
	padding-bottom: 0.3rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: url(~@/assets/images/index/book.png);
	background-size: 2rem;
	background-repeat: no-repeat;
	background-position: 80% 0.5rem;
}
.guide .van-cell__right-icon {
	color: #b3b3b3 !important;
}
.guide .van-cell__title {
	font-size: 0.42rem;
}
.guide .van-cell__label {
	font-size: 0.33rem;
	color: #b3b3b3;
}
.tag {
	display: flex;
	justify-content: center;
	margin-top: 0.8rem;
	text-align: center;
}
.tag h3 {
	margin: 0.1rem 0 0 0;
	font-size: 0.38rem;
	font-weight: normal;
	color: #afc6cc;
}
.tag p {
	font-size: 0.31rem;
	color: #c8d3d5;
}
.tag > div {
	margin: 0 0.7rem;
}
.tag img {
	width: 0.9rem;
}
.call {
	display: flex;
	justify-content: center;
	margin-top: 0.5rem;
}
.call a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1rem;
	line-height: 1rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid #eee;
	width: 5rem;
	text-align: center;
	color: #999;
	font-size: 0.39rem;
}
.call a img {
	width: 0.5rem;
}
.call a span {
	display: flex;
	align-items: center;
	margin-right: 0.1rem;
}
.startField.switching,
.endField.switching {
	-webkit-transition: -webkit-transform 0.2s ease-in-out;
	transition: -webkit-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.startField.switching {
	-webkit-transform: translate3d(150%, 0, 0);
	transform: translate3d(150%, 0, 0);
}
.endField.switching {
	-webkit-transform: translate3d(-150%, 0, 0);
	transform: translate3d(-150%, 0, 0);
}
.pageBg{
	background: #F5F5F5;
	height: 100vh;
}
.Bscroll{
	padding-bottom: .3rem;
}
.list{
	height: 800px;
}
.guidepop{
	background: #fff;
	width: 85%;
	height:63%;
	border-radius: .15rem;
	box-sizing: border-box;
	padding: .41rem .3rem;
	overflow-y: auto;
}
.guidepop h2{
	margin: .21rem 0;
	color:#ff7600;
	font-size: .4rem;
}
.guidepop p{
	font-size: .36rem;
}
</style>
